<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <script src="../build/react.development.js"></script>
    <script src="../build/react-dom.development.js"></script>
    <script src="../build/babel.min.js"></script>
  </head>
  <body>
    <div id="example"></div>
	<script type="text/babel">
     //1.创建组件
     class Weather extends React.Component{
      //构造器调几次？ 1次
      constructor(props){
        console.log("constructor")
        super(props)
        //初始化状态
        this.state = {isOk : false}
        //解决changeWeather中this指向问题
        this.nice = this.changeWeather.bind(this)//bind(this)中的this 是 Weather的实例对象，
      }

      render(){
        //1+n次 -- 初始化1次，点击n次
        console.log("render")
        //读取状态
        const {isOk} = this.state

        //return <h1>今天{this.stat.isOk ? '好' : '不好'}吗？</h1>
        return <h1 onClick={this.nice}>今天{isOk ? '好' : '不好'}</h1>
      }

      changeWeather(){
               //changeWeather方法放在  Weather类的原型对象上，供实例使用
              //通过Weather实例调用changeWeather时，changeWeather中的this就是Weather实例

              //由于changeWeather是作为onClick的回调,所以不是通过实例调用,是直接调用
              //类中的方法默认开启了局部的严格模式,所以changeWeather中的this为undefined
              
      //console.log('标题被点击')
      //console.log(this.state.isOk);
      //console.log(this);

        //点几次调几次
        console.log("changeWeather")
      //获取原来的isOk值
       const isOk = this.state.isOk
      //严重注意：状态必须通过setState进行更新,且更新是一种合并，不是替换
      console.log(this.state.isOk)
      this.setState({isOk:!isOk})

      //严重注意：状态（state）不可直接更改，下面这行就是直接更改！！！
      //this.state.isOk = !isOk //这是错误的写法
      console.log("a")
      console.log(this.state.isOk)
    
    }
      
     }

     //2.渲染组件到页面
     ReactDOM.render(<Weather/>, document.getElementById('example'))

    //  const w =new Weather()
    //  w.changeWeather()

	</script>
  </body>
</html>
